<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { sellerOrderDeatil, confirmDeliver, refund, deleteMeOrder } from '@/api/order'
import type { Address } from '@/api/address/type'
import type { Order } from '@/api/order/type'
import { BaseResponse } from '@/api/base'
import { toast } from '@/utils/common'
import { getStatusText, imageStyle } from './common'

const orderDetail = ref<Order>({})
const address = ref<Address>({})
const popup = ref()
const afterSalePopup = ref()

const loadOrderDetail = async (orderNo: string) => {
  try {
    const res: BaseResponse = await sellerOrderDeatil(orderNo)
    address.value = res.data.address
    orderDetail.value = res.data
  } catch (error) {
    toast(error.tips)
    uni.navigateBack()
  }
}

onLoad((option: any) => {
  loadOrderDetail(option.orderNo)
})

const showPop = () => {
  popup.value?.open()
}
const deliver = async () => {
  try {
    const res: BaseResponse = await confirmDeliver(orderDetail.value.orderNo)
    popup.value?.close()
    toast(res.tips)
    loadOrderDetail(orderDetail.value.orderNo)
  } catch (error) {
    toast(error.tips)
  }
}
const deleleOrder = async () => {
  try {
    const res: BaseResponse = await deleteMeOrder(orderDetail.value.orderNo)
    toast(res.tips)
    uni.navigateBack()
    uni.$emit('backRefresh')
  } catch (error) {
    toast(error.tips)
  }
}

const openSaleAfterPop = async () => {
  afterSalePopup.value?.open()
}

const confirmApplyRefund = async () => {
  try {
    const res: BaseResponse = await refund(orderDetail.value.orderNo)
    toast(res.data)
    afterSalePopup.value?.close()
    loadOrderDetail(orderDetail.value.orderNo)
  } catch (error) {
    toast(error.tips)
  }
}
const jumpToGoodsDetail = () => {
  uni.navigateTo({
    url: `/pages/goods/detail?id=${orderDetail.value.goodsId}`
  })
}

</script>

<template>
  <view>
    <view class="order">
      <view class="goods-publisher">
        <view class="goods-publisher-name">{{ orderDetail.sellerName }}</view>
      </view>
      <view class="goods-info" @click="jumpToGoodsDetail">
        <view style="display: flex;">
          <view class="goods-info-img">
            <my-image :src="orderDetail.goodsPic" :customStyle="imageStyle" mode="aspectFit" />
          </view>
          <view class="goods-info-name">
            <uv-text :lines="2" :text="orderDetail.goodsName"></uv-text>
          </view>
        </view>
        <view class="goods-info-price">
          <view class="goods-price-price">¥{{ orderDetail.goodsPrice }}</view>
          <view class="goods-price-num">x1</view>
        </view>
      </view>
      <view class="order-info">
        <desc-list title="订单状态" conSize="35rpx" conColor="#ff7744">
          <view>{{ getStatusText(orderDetail.status, orderDetail.payStatus) }}</view>
        </desc-list>
        <desc-list title="成交价" conSize="35rpx" conColor="#000">¥{{ orderDetail.goodsPrice }}</desc-list>
        <desc-list title="订单编号">{{ orderDetail.orderNo }}</desc-list>
        <desc-list title="收货人" v-if="address.name">{{ address.name }} {{ address.phone }}</desc-list>
        <desc-list title="收货地址">{{ address.building }} {{ address.address }}</desc-list>
        <desc-list title="订单备注" v-if="orderDetail.remark">{{ orderDetail.remark }}</desc-list>
        <desc-list title="下单时间">{{ orderDetail.createTime }}</desc-list>
        <desc-list title="付款时间" v-if="orderDetail.payStatus === 1">{{ orderDetail.payTime }}</desc-list>
        <desc-list title="成交时间" v-if="orderDetail.status === 1 && orderDetail.payStatus === 1">{{
          orderDetail.confirmTime }}</desc-list>
      </view>
    </view>
    <view class="order-action">
      <view class="order-action-left">
        <uv-icon name="server-man" size="30rpx" color="#ff7744" label="客服" labelPos="bottom"
          @click="() => { toast('暂未开放') }"></uv-icon>
        <uv-icon name="server-man" size="30rpx" color="rgb(5 134 249)" label="买家" labelPos="bottom"
          @click="() => { toast('暂未开放') }"></uv-icon>
      </view>
      <view class="order-action-right">
        <uv-button v-if="orderDetail.status === 3 || orderDetail.status === 4 || orderDetail.status === 6" text="删除订单"
          color="#eee" :custom-style="{ color: '#000' }" @click="deleleOrder"></uv-button>
        <uv-button v-if="orderDetail.status === 1 && orderDetail.payStatus === 1" text="确认交货" color="#ff7744"
          @click="showPop"></uv-button>
        <uv-button v-if="orderDetail.status === 5" text="同意退款" color="#ff7744" @click="openSaleAfterPop"></uv-button>
      </view>
    </view>
    <uv-popup class="popup" ref="popup" mode="bottom" :closeable="true">
      <view class="popup-title">确认交货</view>
      <view class="popup-content">
        <my-image :src="orderDetail.goodsPic" mode="widthFix" :customStyle="{ width: '80px', height: '80px' }" />
        <view>为保证你的交易顺利完成，请核对商品后确认</view>
      </view>
      <view class="popup-btn">
        <uv-button color="#ff7744" text="确定" @click="deliver"></uv-button>
      </view>
    </uv-popup>
    <uv-popup class="popup" ref="afterSalePopup" mode="bottom" :closeable="true">
      <view class="popup-title">确认退款吗</view>
      <view class="popup-content">
        <my-image :src="orderDetail.goodsPic" mode="widthFix" :customStyle="{ width: '80px', height: '80px' }" />
      </view>
      <view class="popup-btn">
        <uv-button color="#ff7744" text="确定" @click="confirmApplyRefund"></uv-button>
      </view>
    </uv-popup>
  </view>
</template>

<style lang="scss">
.address {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx 20rpx;
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;

  .address-icon {
    margin-right: 10rpx;
  }

  .address-info {
    display: flex;
    flex-direction: column;
    width: calc(100% - 50rpx);

    .address-address {
      margin-bottom: 10rpx;
    }

    .address-name {
      color: #999;
    }
  }

  .address-add {
    width: 100%;
  }
}

.order {
  background-color: #fff;
  border-radius: 10rpx;
  padding: 20rpx 20rpx;

  .goods-publisher {
    display: flex;
    align-items: center;
    margin-bottom: 20rpx;

    .goods-publisher-name {
      margin-left: 20rpx;
    }
  }

  .goods-info {
    display: flex;
    margin-bottom: 20rpx;
    justify-content: space-between;

    .goods-info-img {
      margin-right: 20rpx;
    }

    .goods-info-name {
      margin-right: 20rpx;
    }

    .goods-info-price {
      display: flex;
      align-items: end;
      flex-direction: column;
      justify-content: space-between;

      .goods-price-price {
        font-size: 28rpx;
        margin-right: 10rpx;
      }

      .goods-price-num {
        color: #999;
      }
    }
  }

  .order-opt {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 20rpx;
  }

  .order-info {
    display: flex;
    flex-direction: column;
    padding-bottom: 20rpx;
  }
}

.order-action {
  position: fixed;
  bottom: 0;
  left: 0;
  width: calc(100% - 40rpx);
  background-color: #fff;
  padding: 20rpx;
  display: flex;
  justify-content: space-between;

  .order-action-left {
    display: flex;

  }
}

.popup {

  .popup-title {
    font-size: 28rpx;
    font-weight: bold;
    margin-bottom: 40rpx;
    margin-top: 30rpx;
    text-align: center;
  }

  .popup-content {
    display: flex;
    width: 400rpx;
    margin: 20rpx auto;
    flex-direction: column;
    color: #636161;
    font-size: 24rpx;
    text-align: center;
    align-items: center;

    :first-child {
      margin-bottom: 10rpx;
    }
  }

  .popup-btn {
    width: 90%;
    margin: 10% auto;
    margin-bottom: 80rpx;
  }
}
</style>
